<!DOCTYPE html>
<html lang="en">
<script src="/js/jquery.js"></script>
<link rel="stylesheet" href="css/loginstyle.css" type="text/css" media="all" />
<body>


	<div class="main-bg">
		<!-- title -->
		<h1  style="color: #6f42c1">欢迎来到zhkl！</h1>
		<!-- //title -->
		<div class="sub-main-w3">
<!--			<div class="image-style"  align="center"><p style="color: #6f42c1">扫描二维码关注官方公众号<p></div>-->
			<!-- vertical tabs -->
			<div class="vertical-tab">
				<div id="section1" class="section-w3ls">
					<input type="radio" name="sections" id="option1" checked> <label
						for="option1" class="icon-left-w3pvt"><span
						class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
					<article>
						<form @submit.prevent="submit" method="post">
							<h3 class="legend">账号登录</h3>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input type="text" v-model="logindata.name" placeholder="账号或电话号码" name="name" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span> <input
									type="password" v-model="logindata.password" placeholder="密码"
									name="password" required />
							</div>
							<button type="submit" class="btn submit">登 录</button>
							<a href="#" class="bottom-text-w3ls">忘记密码?</a>
						</form>
					</article>
				</div>
				<div id="section2" class="section-w3ls">
					<input type="radio" name="sections" id="option2"> <label
						for="option2" class="icon-left-w3pvt"><span
						class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
					<article>
						<form @submit.prevent="submit" method="post">
							<h3 class="legend">注册帐户</h3>
							<div class="input">
								<span class="fa fa-user-o" aria-hidden="true"></span> <input
									type="text" v-model="registerdata.name" placeholder="账号"
									name="name" required />
							</div>
							<div class="input">
								<span class="fa fa-user-o" aria-hidden="true"></span> <input
									type="text" v-model="registerdata.phone" placeholder="手机号码"
									name="name" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span> <input
									type="password" v-model="registerdata.password"
									placeholder="密码" name="password" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span> <input
									type="password" v-model="registerdata.confirmPassword"
									placeholder="确认密码" name="confirmPassword" required />
							</div>
							<button type="submit" class="btn submit">注 册</button>
						</form>
					</article>
				</div>
				<div id="section3" class="section-w3ls">
					<input type="radio" name="sections" id="option3"> <label
						for="option3" class="icon-left-w3pvt"><span
						class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
					<article>
						<form @submit.prevent="submit" method="post">
							<h3 class="legend last">密码找回</h3>
							<p class="para-style-2">
								<strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a>
							</p>
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span> <input
									type="text" v-model="forgetdata.name" placeholder="手机号码"
									name="name" required />
								<button type="button"  class="fa fa-envelope-o">获取验证码</button>
							</div>
							<button type="submit" class="btn submit last-btn">提交</button>
						</form>
					</article>
				</div>
			</div>
			<!-- //vertical tabs -->
			<div class="clear"></div>
		</div>
	</div>

	<footer class="footer">
		<div class="copyright">
			<div align="center">
<!--				<div class="image-style"  align="center"><p style="color: #6f42c1">扫描二维码关注官方公众号<p></div>-->
				<div>Copyright © 2020 until forever <a href="https://zhkl.xyz/i.do">渝人地盘官网</a><div>
			</div>
		</div>
	</footer>

</body>

</html>